You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
3.2 KiB
100 lines
3.2 KiB
import React, { Suspense } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import { AboutMarkdownSection } from "../../components/AboutMarkdownSection";
|
|
import { HomeHeroCarousel } from "../../components/HomeHeroCarousel";
|
|
import { getAboutMarkdown, getFloors, getSolutions, getHero } from "../../lib/data";
|
|
|
|
// 动态导入非关键组件，优化首屏加载
|
|
const ProductCarouselSection = dynamic(
|
|
() => import("../../components/ProductCarouselSection").then((mod) => ({ default: mod.ProductCarouselSection })),
|
|
{
|
|
ssr: true,
|
|
loading: () => <SectionSkeleton />
|
|
}
|
|
);
|
|
|
|
const SolutionsCarousel = dynamic(
|
|
() => import("../../components/SolutionsCarousel").then((mod) => ({ default: mod.SolutionsCarousel })),
|
|
{
|
|
ssr: true,
|
|
loading: () => <SectionSkeleton />
|
|
}
|
|
);
|
|
|
|
export const revalidate = 300;
|
|
|
|
// 加载占位符组件
|
|
function SectionSkeleton() {
|
|
return (
|
|
<div className="relative bg-[#f5f7fb] py-16 md:py-20 animate-pulse">
|
|
<div className="mx-auto w-full max-w-5xl px-4 md:px-6">
|
|
<div className="h-4 w-32 bg-gray-300 rounded mx-auto mb-3"></div>
|
|
<div className="h-8 w-64 bg-gray-300 rounded mx-auto mb-3"></div>
|
|
<div className="h-4 w-96 bg-gray-200 rounded mx-auto"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function HomePage({ params }: { params: { locale: string } }) {
|
|
const locale = params.locale;
|
|
|
|
// 并行加载数据（React 会自动优化）
|
|
const [floors, solutionsData, aboutMarkdown, heroData] = [
|
|
getFloors(locale),
|
|
getSolutions(locale),
|
|
getAboutMarkdown(locale),
|
|
getHero(locale),
|
|
];
|
|
|
|
const primaryFloor = floors[0];
|
|
|
|
return (
|
|
<main className="flex flex-col gap-0">
|
|
<HomeHeroCarousel data={heroData} />
|
|
|
|
<Suspense fallback={<SectionSkeleton />}>
|
|
{primaryFloor && (
|
|
<ProductCarouselSection
|
|
products={primaryFloor.products}
|
|
title={
|
|
primaryFloor.hero?.title ??
|
|
primaryFloor.title ??
|
|
"核心监测终端与智能设备"
|
|
}
|
|
description={
|
|
primaryFloor.hero?.description ??
|
|
primaryFloor.hero?.subtitle ??
|
|
"多模态感知硬件覆盖城市结构安全监测的关键场景，支持长续航、低功耗与云端协同。"
|
|
}
|
|
eyebrow={primaryFloor.hero?.eyebrow ?? "Product Portfolio"}
|
|
/>
|
|
)}
|
|
</Suspense>
|
|
|
|
<Suspense fallback={<SectionSkeleton />}>
|
|
{solutionsData?.items?.length ? (
|
|
<SolutionsCarousel
|
|
items={solutionsData.items}
|
|
title={
|
|
solutionsData.hero?.title ??
|
|
solutionsData.title ??
|
|
"行业安全监测解决方案矩阵"
|
|
}
|
|
description={
|
|
solutionsData.hero?.description ??
|
|
solutionsData.hero?.subtitle ??
|
|
"覆盖房屋、边坡、交通、能源等多场景的安全监测方案，联动多源感知与云端智能决策。"
|
|
}
|
|
eyebrow={solutionsData.hero?.eyebrow ?? "Solutions Suite"}
|
|
/>
|
|
) : null}
|
|
</Suspense>
|
|
|
|
<Suspense fallback={<SectionSkeleton />}>
|
|
<AboutMarkdownSection content={aboutMarkdown} locale={locale} />
|
|
</Suspense>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
|